import React, {Component} from "react";
import Detail from "./Detail";

import { Link, Route } from "react-router-dom";

export default class Message extends Component {

    state = {
        messageArr: [
            {id: '01', title: '消息1'},
            {id: '02', title: '消息2'},
            {id: '03', title: '消息3'}
        ]
    }

    // replace跳转到Detail组件
    replaceShow = (id, title) => {
        // 携带params参数
        //this.props.history.replace(`/home/message/detail/${id}/${title}`);

        // 携带search参数
        //this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

        // 携带state参数
        this.props.history.replace('/home/message/detail', {id, title})
    }

    // push 跳转
    pushShow = (id, title) => {
        // 携带params参数
        //this.props.history.push(`/home/message/detail/${id}/${title}`);

        // 携带search参数
        //this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

        // 携带state参数
        this.props.history.push('/home/message/detail', {id, title})
    }

    back = () => {
        this.props.history.goBack();
    }

    forward = () => {
        this.props.history.goForward();
    }

    go = () => {
        this.props.history.go(2);
    }

    render() {
        const {messageArr} = this.state;
        return (
            <div>
                <ul>
                    {
                        messageArr.map(msgObj => {
                            return (
                                <li key={msgObj.id}>
                                    {/* 向路由组件传递 params参数 */}
                                    <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> &nbsp;&nbsp;
                                    <button onClick={() => this.pushShow(msgObj.id, msgObj.title)}>push查看</button>&nbsp;&nbsp;
                                    <button onClick={() => this.replaceShow(msgObj.id, msgObj.title)}>replace查看</button>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr/>
                {/* 声明接收路由 params 参数 */}
                {/*<Route path="/home/message/detail/:id/:title" component={Detail} />*/}
                <Route path="/home/message/detail" component={Detail} />

                {/* 前进 回退 */}
                <button onClick={this.back}>回退</button> &nbsp;
                <button onClick={this.forward}>前进</button> &nbsp;

                <button onClick={this.go}>go</button>
            </div>
        );
    }
}